<template>
  <div class="vertical-slider" ref="slider">
    <div class="track">
      <div v-for="(_, index) in steps" :key="index" class="step-point" />
    </div>
    <div class="handle-wrapper" :style="{ top: `${handlePosition}px` }">
      <div class="handle" :class="{ 'is-dragging': isDragging }" @mousedown.stop="startDrag" @mouseup.stop="stopDrag">
        <button @change="handleHandleClick" v-show="isDragged" />
        <svg-icon class="svg-icon" v-show="!isDragged" :name="icon" style="width: 20px; height: 20px" />
        <div>合并到语法环境</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Slider',
  components: {},
  props: {
    value: {
      type: Number,
      default: 2,
    },
    steps: {
      type: Number,
      default: 5,
    },
    tooltip: {
      type: Object,
      default: () => ({}),
    },
    icon: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      isDragging: false,
      isDragged: false,
      currentStep: this.value,
      handlePosition: 0,
      sliderHeight: 0,
      stepSize: 0,
      dragStartY: 0,
      dragStartStep: 0,
      showTooltip: false,
    }
  },
  mounted() {
    this.initializeSlider()
    window.addEventListener('resize', this.initializeSlider)
    document.addEventListener('mousemove', this.onDrag)
    document.addEventListener('mouseup', this.stopDrag)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.initializeSlider)
    document.removeEventListener('mousemove', this.onDrag)
    document.removeEventListener('mouseup', this.stopDrag)
  },
  methods: {
    initializeSlider() {
      if (!this.$refs.slider) return
      this.sliderHeight = this.$refs.slider.clientHeight - 40
      this.stepSize = this.sliderHeight / (this.steps - 1)
      this.updateHandlePosition(this.currentStep)
    },
    updateHandlePosition(step) {
      this.handlePosition = 20 + (this.steps - 1 - step) * this.stepSize - 15
    },
    startDrag(e) {
      if (e.target.closest('.confirm')) {
        return
      }
      console.log('startDrag', e)
      this.isDragging = true
      this.isDragged = false
      this.dragStartY = e.clientY
      this.dragStartStep = this.currentStep
    },
    onDrag(e) {
      this.showTooltip = true
      if (!this.isDragging) return
      const dragDistance = this.dragStartY - e.clientY
      const stepChange = Math.round(dragDistance / this.stepSize)
      let newStep = this.dragStartStep + stepChange
      newStep = Math.max(0, Math.min(newStep, this.steps - 1))

      if (newStep !== this.currentStep) {
        this.currentStep = newStep
        this.updateHandlePosition(newStep)
        this.$emit('input', newStep)
      }
    },
    stopDrag() {
      if (this.isDragging) {
        this.showTooltip = false
        this.isDragging = false
        if (this.currentStep !== this.value) {
          this.isDragged = true
        }

        console.log('this.isDragged', this.isDragged)
      }
    },
    handleHandleClick(e) {
      console.log('handleHandleClick', e)

      if (this.isDragged) {
        this.$emit('change', this.currentStep)
      }
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(newValue) {
        if (this.currentStep !== newValue) {
          this.currentStep = newValue
          this.updateHandlePosition(newValue)
        }
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.vertical-slider {
  position: relative;
  z-index: 10;
  width: 56px;
  height: 200px;
  background: var(--custom-bgc-canvas-slider);
  border-radius: 28px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  .track {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;

    .step-point {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.9);
    }
  }

  .handle-wrapper {
    position: absolute;
    left: 13px;
    transition: top 0.1s ease-out;
  }

  .handle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--custom-bgc-canvas-send-btns);
    cursor: pointer;

    &.is-dragging {
      transition: none;
    }

    &:has(.svg-icon) {
      background-color: var(--custom-color-canvas-send-btns);
      cursor: grab;
    }
  }
}
</style>
